<template>
<div class="user_wrap">
    <head-top :go-back='true' :head-title="pagetitle"></head-top>
    <div class="user_info_show">
        <div class="top_banner">
            <div class="top_banner_mask center">
                <router-link :to="{ name:'UserInfo',params:{userInfo:userInfo}}">
                    <span class="user_img">
              <img class="" v-bind:src="userInfo.userImg" alt="">
            </span>
                    <div class="user_name textCenter">{{userInfo.userName}}</div>
                </router-link>
            </div>
        </div>
        <div class="bg_fff">
            <ul class="user_info center">
                <li class="user_info_list">
                    <i class="iconfont"></i>
                    <span>购物车</span>
                    <i class="iconfont icon_right fr"></i>
                </li>
                <li class="user_info_list">
                    <i class="iconfont"></i>
                    <span>收藏</span>
                    <i class="iconfont icon_right fr"></i>
                </li>
                <li class="user_info_list">
                    <i class="iconfont"></i>
                    <span>我的钱包</span>
                    <i class="iconfont icon_right fr"></i>
                </li>
                <li class="user_info_list">
                    <i class="iconfont"></i>
                    <span>抵用券</span>
                    <i class="iconfont icon_right fr"></i>
                </li>
                <li class="user_info_list">
                    <i class="iconfont"></i>
                    <span>关于我们</span>
                    <i class="iconfont icon_right fr"></i>
                </li>
            </ul>
        </div>
    </div>
    <transition name="router-slid" mode="out-in">
        <router-view class="router_lalala"></router-view>
    </transition>
    <foot-bar></foot-bar>
</div>
</template>

<script>
import Bus from "@/components/bus.js";

export default {
    created() {
        var _id = window.localStorage.getItem("token");
        this.user = _id;
        this.$axios
            .post("/api/wzg/getInfo", {
                user: _id
            })
            .then(res => {
                var data = res.data[0];
                // this.newName = this.userName;
                Bus.$emit('updateAll', data);
                this.userInfo = Bus.BusUserInfo;
            })
            .catch(err => {
                console.log("发生错误");
            });

    },
    mounted() {},
    data() {
        return {
            pagetitle: "我的",
            userInfo: {
                user: '',
                userName: "",
                birthday: "",
                userImg: "src/assets/img/user_img.png"
            },
            newName: "",
            show: true,
            showEditUserName: false,
        };
    },
    methods: {
        // newHeaderImage(newImg) {
        //   this.userInfo.headerImage = newImg;
        // }
    }
};
</script>

<style lang="css" scoped>
.user_info_show {
    width: 100%;
    opacity: 1;
    padding-top: 34px;
}

.user_wrap {
    background: #fff;
    width: 100%;
    z-index: 1;
    padding-bottom: 20px;
    overflow: hidden;
}

.top_banner {
    background: #f8970b;
    padding: 10px 0;
}

.top_banner_bar {
    padding-top: 5px;
    padding-bottom: 5px;
    line-height: 24px;
}

.user_img {
    display: block;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    margin: 0px auto;
    overflow: hidden;
}

.user_img img {
    width: 100%;
}

.user_name {
    color: #fff;
    font-size: 14px;
    margin-top: 5px;
}

.user_info {
    color: #6e6e6e;
}

.user_info_list {
    line-height: 30px;
    padding: 5px 0;
    border-bottom: 1px solid #f8f8f8;
    color: #6e6e6e;
}

.user_info_list:last-of-type {
    border-bottom: none;
}

.editUserInfo {
    width: 100%;
    position: absolute;
    left: 0px;
    right: 0px;
    z-index: 2;
    transition: all 0.5s ease;
    left: 100%;
}

.editUserInfo.don_show {
    display: block;
    opacity: 1;
    left: 0px;
    top: 0px;
}

.top_bar {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    line-height: 30px;
    background: #fff;
}

.top_bar i {
    position: absolute;
    z-index: 2;
    color: #69d6c6;
    font-size: 20px;
}

.top_bar .top_bar_title {
    display: block;
    top: 0px;
    left: 0px;
    width: 100%;
    text-align: center;
}

.editUserInfo .user_info_wrap {
    background: #fff;
    margin-top: 40px;
    color: #6e6e6e;
}

.editUserInfo .user_info_list {
    float: left;
    position: relative;
    width: 100%;
    padding: 5px 0;
    border-bottom: 1px solid #f8f8f8;
}

.editUserInfo .user_info_head_img {
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -10px;
}

.editUserInfo .user_info_img {
    padding-right: 20px;
    width: 60px;
    height: 60px;
}

.editUserInfo .user_info_list i {
    position: absolute;
    top: 50%;
    right: 0px;
    margin-top: -15px;
}

.editUserInfo .user_info_list .user_info_text {
    padding-right: 20px;
}

.edit_user_name {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 99;
    width: 100%;
    height: 100%;
    background: #fafafa;
}

.edit_user_name .determine_btn {
    color: #69d6c6;
}

.edit_user_name .edit_wrap {
    position: relative;
    width: 100%;
    height: 32px;
    line-height: 32px;
}

.edit_user_name .edit_wrap label {
    position: absolute;
    left: 5px;
}

.edit_user_name .edit_wrap input {
    width: calc(100% - 40px);
    height: 32px;
    outline: none;
    border: 1px solid #666;
    overflow: hidden;
    float: left;
    padding-left: 40px;
}

.edit_user_name .edit_wrap input:focus {
    border: 1px solid #69d6c6;
}


</style>
